<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>


        /* 标题部分 */
        .header {
            background-color: #999999;
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px; /* 添加一些内边距以容纳内容 */
            border-radius: 5px 5px 0 0; /* 圆角效果，仅应用于顶部 */
            color: #F8F8F8;
        }
        #topUI {
            list-style-type: none;
            display: flex;
        }
        #topUI li {
            margin: 0 20px;
            text-decoration: underline;
        }
        #topUI li:hover {
            color: #FF0000;
        }


        /* 主体部分 */
        #content1 {
            flex: 1; /* 占据剩余空间 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中（如果需要的话） */
            padding: 20px; /* 内边距，根据需要调整 */
            background-color: #f8f8f8;
            overflow-y: auto; /* 如果内容超出，则允许垂直滚动 */
            height: 800px;
        }
        #content1 form {
            width: 450px;
            border : 1px solid #55aaff;
            padding: 50px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选，添加阴影效果 */
        }
        form #text {
            resize: none;/* 禁止调整大小 */
            background-color: #ffffff;
        }
        form #type {
            margin: 20px;
        }
        form #submit {
            width: 80px;
            position: relative;
            bottom: 5px;
            left: 343px;
        }
        #content2 {
            flex: 1; /* 占据剩余空间 */
            padding: 20px; /*内边距，根据需要调整 */
            background-color: #f8f8f8;
        }
        /* 尾部部分 */
        .Tail {
            background-color: #f1f1f1;
            padding: 10px 20px;
            text-align: center;
            border-radius: 0 0 5px 5px; /* 圆角效果，仅应用于底部 */
        }

    </style>
    <script>
        $(document).ready(function() {
            $("#content2").hide();
        })
        function mainpage(){
            //隐藏一个
            $("#content2").hide();
            //展示一个
            $("#content1").show();

        }
        function learnpage(){
            //隐藏一个
            $("#content1").hide();
            //展示一个
            $("#content2").show();

        }
    </script>
</head>
<body>
<div>
    <!-- 头部 -->
    <div class="header">
        <ul id="topUI">
            <li onclick="mainpage()">软件体系结构功能实现</li>
            <li onclick="learnpage()">软件体系结构教学</li>
        </ul>
    </div>
    <!-- 主体 -->
    <div id="content1">
        <form action="structureInput" method="post" id="functionForm">
            请选择你要使用的软件体系结构风格：
            <select name="type" id="type">
                <option value="main-children">主程序-子程序</option>
                <option value="faceObject">面向对象</option>
                <option value="eventSystem">事件系统</option>
                <option value="pipeFilter">管道过滤器</option>
            </select><br>
            输入文本：
            <br>
            <textarea name="text" cols="60" rows="10" id="text"></textarea><br>
            <input type="submit" value="提交" id="submit"/>
        </form>
    </div>
    <div id="content2">
        <div>
            一、主程序-子程序软件体系结构：
        </div>
        <img src="static/img/main_child.png"/><br>
        程序的执行流程由一个主程序控制，主程序通过调用多个子程序来完成特定的功能。<br>
        <img src="static/img/demo1.1.png"/>
        <div>
            二、面向对象软件体系结构：
        </div>
        <img src="static/img/face_Object.png"/><br>
        基于对象的概念，将数据和操作数据的方法封装在对象中，设置多个类分别实现各自功能，最后集合在Main中按顺序调用。<br>
        <img src="static/img/demo2.1.png"/>
        <div>
            三、事件系统软件体系结构：
        </div>
        <img src="static/img/eventSystem.png"/><br>
        通过事件的产生和响应来驱动程序的执行，这里使用了观察者模式，使得当一个对象的状态发生改变时，所有依赖于它的对象都会自动收到通知并更新。<br>
        <img src="static/img/demo3.1.png"/>
        <img src="static/img/demo3.2.png"/>
        <div>
            四、管道-过滤软件体系结构：
        </div>
        <img src="static/img/pipeFilter.png"/><br>
        将处理过程分为多个过滤器（处理单元），通过管道连接。这些过滤器依次处理数据，形成一个数据流。<br>
        <img src="static/img/demo4.1.png"/>
        <img src="static/img/demo4.2.png"/>
        <img src="static/img/demo4.3.png"/>
    </div>
    <!-- 尾部 -->
    <div class="Tail">
        <span>关于我们</span>
        <span>联系我们</span>
    </div>
</div>
</body>
</html>
